<template>
    <div class="min-box">
        <div class="newsSection">
            <!-- 班级消息 -->
            <ClassMess @changeGrade="changeGrade"></ClassMess>
            <!-- 右边格子 -->
            <RightGrid
                :listData="rightGridList"
                :classGro="gradeDataList"
            ></RightGrid>
        </div>
        <!-- 列表 -->
        <div class="classList">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="班级课表" name="first">
                    <ClassTable
                        :isShowGradeOptions="false"
                        :gradeDataList="gradeDataList"
                    ></ClassTable>
                </el-tab-pane>
                <el-tab-pane label="相册" name="second">
                    <Album
                        :gradeDataList="gradeDataList"
                        v-if="activeName === 'second'"
                    ></Album>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import ClassMess from "./components/classMess";
import RightGrid from "@/components/rightGrid/index";
import ClassTable from "@/components/classTable/index";
import Album from "./components/album";

export default {
    components: {
        ClassMess,
        RightGrid,
        ClassTable,
        Album
    },
    data() {
        return {
            activeName: "first",
            gradeDataList: [], //班级选择
            rightGridList: [
                {
                    imgUrl: require("@/assets/images/icon/画板 1 副本 9@2x(3).png"),
                    title: "慧练",
                    subTitle: "完成老师布置作业",
                    url: "/work/classWork/index",
                    hasClass: true
                },
                {
                    imgUrl: require("@/assets/images/icon/画板 1 副本 9@2x(1).png"),
                    title: "测验",
                    subTitle: "完成老师布置作业",
                    url: "/test/classTest/index",
                    hasClass: true,
                    type: true
                },
                {
                    imgUrl: require("@/assets/images/icon/画板 1 副本 9@2x.png"),
                    title: "智题本",
                    url: "/wisdomBook/wisdomList/index",
                    subTitle: "完成老师布置作业",
                    hasClass: true
                },
                {
                    imgUrl: require("@/assets/images/icon/画板 1 副本 9@2x(2).png"),
                    title: "签到",
                    subTitle: "完成老师布置作业"
                }
            ]
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        changeGrade(item) {
            this.gradeDataList = [item];
            console.log("班级切换了：", this.gradeDataList);
        }
    }
};
</script>

<style scoped lang="scss">
.min-box {
    width: 100%;
    min-width: 1200px;
    height: 500px;
    padding: 26px;
    box-sizing: border-box;
}
.newsSection {
    width: 100%;
    height: 403px;
    border-radius: 8px;
    display: flex;
}

/* 列表 */
.classList {
    margin-top: 32px;
    box-sizing: border-box;
    margin-bottom: 50px;

    .el-tabs__item.is-active {
        color: #018854 !important;
    }
    .el-tabs__item:hover {
        color: #018854 !important;
    }
    .el-tabs__active-bar {
        background: #018854 !important;
    }
}
</style>
